<template>
  <fieldset>
    <legend>统计信息</legend>
    <div class="archives-count">
      <div class="archives-count-item">
        <code id="post-count" data-num="" title="">{{ statistics.articles }}</code>
        {{$t('articles')}}
      </div>

      <div class="archives-count-item">
        <code id="tag-count" data-num="" title="">{{ statistics.labels }}</code>
        {{$t('labels')}}
      </div>
      <div class="archives-count-item">
        <code id="comment-count" data-num="" title="">{{ statistics.comments }}</code>
        {{$t('comments')}}
      </div>
      <div class="archives-count-item">
        <code id="view-count" data-num="" title="">{{ statistics.ip }}</code>
        {{$t('ip')}}
      </div>
      <div class="archives-count-item">
        <code id="category-count" data-num="" title="">{{ statistics.views }}</code>
        {{$t('views')}}
      </div>
    </div>
  </fieldset>
</template>

<script>
  import {getBlogInfo} from "@/api/category";

  export default {
    name: "source-slot",
    data() {
      return {
        statistics: {
          articles: '123+',
          labels: '215+',
          comments: '0+',
          ip: "0+",
          views: "0+"
        },
      }
    },
    methods: {
      getBlogInfo() {
        getBlogInfo().then(({data})=>{
          this.statistics.articles = data.data.articleNum + '+'
          this.statistics.labels = data.data.tagNum + '+'
        })
      }
    },
    mounted() {
      this.getBlogInfo()
    }
  }
</script>


<style lang="scss" scoped>

  fieldset {
    margin: 10px 20px 0px 20px;
    border: .06em dashed #d5d5d5;
    border-radius: 0.3em;
    padding-bottom: 15px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 4px;
    background-color: #f3f3f3;
  }

  fieldset > legend {
    background-color: #eb5055;
    color: #fff;
    border-radius: .2em;
    padding: .2em .5em;
    font-size: .9em;
  }

  .archives-count {
    width: 100%;
    text-align: center;
    color: #666;
  }

  .archives-count .archives-count-item {
    padding: 0.4em 0 0.6em;
    width: 20%;
    float: left;
    border-radius: 0.3em;
  }


  .archives-count code {
    display: block;
    font-size: 2em;
    color: #707070;
    background: transparent !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .archives-count .archives-count-item:hover {
    background: #e8e8e8;
  }

  @media(max-width: 800px) {
    .archives-count code {
      font-size: 15px;
      text-overflow: clip;
      margin-left: -6px;
      margin-right: -6px;
    }
  }

  @media(max-width: 375px) {
    .archives-count code {
      font-size: 14px;
      text-overflow: clip;
      margin-left: -6px;
      margin-right: -6px;
    }
  }


</style>
